<template>
  <PageMain>
    <ProTable ref="tableRef" :columns="columns" :init-param="initParam" :request-api="getTableList" border>
      <template #tableHeader="scope">
        <el-button type="primary" size="default" @click="addFn('新建用户')">新建用户</el-button>
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="warning" link @click="editFn(scope.row)">编辑</el-button>
        <el-button type="warning" link @click="enableFn(scope.row)">{{
          scope.row.disabledFlag === 0 ? "禁用" : "启用"
        }}</el-button>
        <el-button type="warning" link @click="detailFn(scope.row)">查看</el-button>
        <el-button type="warning" link @click="resetPwdFn(scope.row)">重置密码</el-button>
      </template>
    </ProTable>

    <add ref="addRef" @updata="updata" />
  </PageMain>
</template>

<script setup>
import { ElMessage, ElMessageBox } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { userType, userStatus } from "@/utils/dict";
import add from "./dialog/add.vue";
import api from "@/api";
const router = useRouter();

const tableRef = ref();

// 表格初始参数
const initParam = reactive({
  pageNum: 1,
  pageSize: 10,
  searchCount: true,
});

const getTableList = (params) => {
  if (params.timekey?.length > 1) {
    params.startCreateTime = params.timekey[0];
    params.endCreateTime = params.timekey[1];
  }
  return api.post(`/user/queryPage`, params, {
    loading: true,
  });
};

// 表格配置项
const columns = ref([
  { label: "用户昵称", prop: "userName", align: "left" },
  {
    label: "用户账户",
    prop: "userAccount",
    align: "left",
    search: { el: "input", showLabel: true },
  },
  { label: "联系人", prop: "contactName", align: "left", search: { el: "input", showLabel: true } },
  {
    label: "注册时间",
    prop: "createTime",
    align: "left",
    search: {
      el: "date-picker",
      span: 2,
      key: "timekey",
      showLabel: true,
      props: { type: "datetimerange", valueFormat: "YYYY-MM-DD HH:mm:ss" },
    },
  },
  { label: "用户类型", prop: "type", align: "left", enum: userType },
  { label: "状态", prop: "disabledFlag", align: "left", enum: userStatus },
  { prop: "operation", label: "操作", width: "220px", align: "center", fixed: "right" },
]);

// 更新数据
const updata = () => {
  tableRef.value.getTableList();
};

// 新增用户
const addRef = ref();
const addFn = (title, row) => {
  addRef.value.show(title, row);
};

// 编辑用户信息
const editFn = (row) => {
  router.push({
    path: "/users/edit",
    query: { id: row.id },
  });
};

// 查看详情
const detailFn = (row) => {
  router.push({
    path: "/users/detail",
    query: { id: row.id },
  });
};

// 启用禁用
const enableFn = async (row) => {
  const text = row.disabledFlag === 0 ? "禁用" : "启用";
  await useHandleData(
    () =>
      api.post(
        `/user/updateDisable`,
        {
          id: row.id,
          disabledFlag: row.disabledFlag === 0 ? true : false,
        },
        { loading: true }
      ),
    `${text}【${row.userName}】`
  );

  updata();
};

// 重置密码
const resetPwdFn = async (row) => {
  await useHandleData(() => api.get(`/user/resetPwd/${row.id}`, {}, { loading: true }), `重置【${row.userName}】密码`).then(
    (res) => {
      ElMessageBox({
        message: `新密码为【${res}】`,
      });
    }
  );
  updata();
};
</script>
